﻿<Window x:Class="TestApplication.RatingSelectorTest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="http://schemas.AvalonControls/AvalonControlsLibrary/Controls"
    Title="RatingSelector" Height="600" Width="600" Loaded="Window_Loaded"
    xmlns:current="clr-namespace:TestApplication">
    <DockPanel LastChildFill="True">
        
        <TextBlock DockPanel.Dock="Top">
            <current:BrowserLink NavigateUri="http://marlongrech.wordpress.com/2007/12/17/rating-selector/">For more info click here</current:BrowserLink>
        </TextBlock>
        
        <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>
            <Border>
                <!--Use the RateItemColor and the RateItemHoverColor to change the color of the items-->
                <local:RatingSelector Name="rating" RateItemColor="Salmon" RateItemHoverColor="Pink" RatingSelected="1"/>
            </Border>

            <WrapPanel Grid.Row="1">
                <TextBlock Text="Rating Selected" Margin="0,0,5,0"/>
                <TextBlock Text="{Binding ElementName=rating, Path=RatingSelected}"/>
                <CheckBox Margin="10,0,0,0" Content="Make read only" IsChecked="{Binding ElementName=rating, Path=IsReadOnly}"/>
            </WrapPanel>
        </Grid>
        
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>
            
            <TextBlock Text="Change the Look of the control by using Control Templates"/>
            
            <Border Grid.Row="1">
                <Border.Resources>
                    <!--Restyle the look of the items inside the control-->
                    <Style x:Key="{x:Type local:RatingSelectorItem}" TargetType="{x:Type local:RatingSelectorItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type local:RatingSelectorItem}">
                                    <Button Command="local:RatingSelector.SelectRating" 
                                        CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelectorItem}}, Path=RateValue}"
                                        Cursor="Hand">
                                        <Button.Template>
                                            <!--Control template to show the star-->
                                            <ControlTemplate TargetType="Button">
                                                <Border Name="path" Background="Gray" Margin="1" CornerRadius="5" Height="10" Width="10"/>
                                                <ControlTemplate.Triggers>
                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelectorItem}}, Path=IsSelected}"
                                                                 Value="True">
                                                        <Setter TargetName="path" Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelector}}, Path=RateItemColor}"/>
                                                    </DataTrigger>
                                                    
                                                    <MultiDataTrigger>
                                                        <MultiDataTrigger.Conditions>
                                                            <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelectorItem}}, Path=IsHigherRateMouseOver}"
                                                                 Value="True"/>
                                                            <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelectorItem}}, Path=IsSelected}"
                                                                 Value="False"/>
                                                            <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelector}}, Path=IsReadOnly}"
                                                                Value="False"/>
                                                        </MultiDataTrigger.Conditions>
                                                        <MultiDataTrigger.Setters>
                                                            <Setter TargetName="path" Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:RatingSelector}}, Path=RateItemHoverColor}"/>
                                                        </MultiDataTrigger.Setters>
                                                    </MultiDataTrigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>

                                        </Button.Template>
                                    </Button>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Border.Resources>
                
                <local:RatingSelector Name="rating2" MinRating="0" MaxRating="10" RatingSelected="3">
                    <local:RatingSelector.Template>
                        <ControlTemplate TargetType="{x:Type local:RatingSelector}">
                            <!--It is important to set a backgroud color outwise the Mouse over event will not be fire and the items would not highlight on mouse over-->
                            <Border CornerRadius="5" BorderBrush="Blue" BorderThickness="1" Background="Transparent"
                                    HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5">
                                <StackPanel IsItemsHost="True"/>
                            </Border>
                        </ControlTemplate>
                    </local:RatingSelector.Template>
                    <!--You can also use the Items Panel to change the Oriantation of the control-->
                    <!--<local:RatingSelector.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </local:RatingSelector.ItemsPanel>-->
                </local:RatingSelector>
                
            </Border>

            <WrapPanel Grid.Row="2">
                <TextBlock Text="Rating Selected" Margin="0,0,5,0"/>
                <TextBlock Text="{Binding ElementName=rating2, Path=RatingSelected}"/>
            </WrapPanel>
        </Grid>
        
        <Grid Grid.Row="2">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Border>
                <local:RatingSelector Name="rating3" MinRating="0" MaxRating="8" RatingSelected="3"/>
            </Border>

            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <WrapPanel>
                    <TextBlock Text="Rating Selected" Margin="0,0,5,0"/>
                    <TextBlock Text="{Binding ElementName=rating3, Path=RatingSelected}"/>
                </WrapPanel>
                
                <WrapPanel Grid.Row="1" VerticalAlignment="Center">
                    <TextBlock Text="Change the range >> Min Rate" HorizontalAlignment="Center"/>
                    <TextBox Text="{Binding Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ElementName=rating3, Path=MinRating}" TextAlignment="Center" Margin="5,0,10,0" Width="30"/>
                    <TextBlock Text="Max Rate" HorizontalAlignment="Center"/>
                    <TextBox Text="{Binding Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ElementName=rating3, Path=MaxRating}" TextAlignment="Center" Margin="5,0,0,0" Width="30"/>
                </WrapPanel>
            </Grid>
        </Grid>
    </Grid>
    </DockPanel>
</Window>
